<!-- DOM案例无缝轮播 -->

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
      * {
        margin: 0;
        padding: 0;
        list-style: none;
      }

      .inner {
        width: 564px;
        height: 315px;
        border: 1px solid red;
        margin: 30px auto;
        border-radius: 12px;
        overflow: hidden;
        position: relative;
      }

      .banner {
        width: calc(100% * 6);
        height: 100%;
      }

      .banner > li {
        width: calc(100% / 6);
        height: 100%;
        float: left;
      }

      .btn > .btn_prve,
      .btn > .btn_next {
        width: 30px;
        height: 50px;
        background-color: rgba(0, 0, 0, 0.3);
        color: white;
        font-size: 18px;
        text-align: center;
        line-height: 50px;
        cursor: pointer;
      }

      .btn {
        width: 100%;
        margin-top: -25px;
        position: absolute;
        left: 0%;
        top: 50%;
        z-index: 99999;
        justify-content: space-between;
        align-items: center;
        display: none;
      }

      .inner:hover > .btn {
        display: flex;
      }

      .btn_prve:hover,
      .btn > .btn_next:hover {
        background-color: rgba(255, 0, 0, 1);
      }

      .page {
        width: 150px;
        height: 50px;
        position: absolute;
        bottom: 20px;
        left: 50%;
        margin-left: -75px;
        display: flex;
        justify-content: space-around;
        align-items: center;
      }

      .page > li {
        width: 20px;
        height: 20px;
        border-radius: 999999999px;
        background-color: rgba(0, 0, 187, 0.3);
        color: white;
        text-align: center;
        line-height: 20px;
        cursor: pointer;
      }

      .page > .active {
        background-color: red;
        color: aqua;
      }
    </style>
  </head>
  <body>
    <!-- 视口区域 -->
    <div class="inner">
      <!--图片容器 -->
      <ul class="banner">
        <li
          style="
            background: url(../img/avatar.png) center center/cover no-repeat;
          "
        ></li>
        <li
          style="
            background: url(../img/defaultInteriorBackgroundBanner.jpg) center
              center/cover no-repeat;
          "
        ></li>
        <li
          style="background: url(../img/Logo.png) center center/cover no-repeat"
        ></li>
        <li
          style="
            background: url(../img/avatar.png) center center/cover no-repeat;
          "
        ></li>
        <li
          style="
            background: url(../img/defaultInteriorBackgroundBanner.jpg) center
              center/cover no-repeat;
          "
        ></li>
        <!--用户眼中最后一张图片-->
        <li
          style="
            background: url(../img/avatar.png) center center/cover no-repeat;
          "
        ></li>
        <!--最后一张 == 第一张图片-->
      </ul>
      <!-- 左右点击按钮 -->
      <div class="btn">
        <div class="btn_prve">左</div>
        <div class="btn_next">右</div>
      </div>
      <!-- 分页器 -->
      <ul class="page">
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
      </ul>
    </div>
    <script>
      //获取所需元素
      var lis = document.querySelectorAll(".banner>li");
      var banner = document.querySelector(".banner");
      var btn_prve = document.querySelector(".btn_prve");
      var btn_next = document.querySelector(".btn_next");
      var pages = document.querySelectorAll(".page>li");
      //初始值
      var time = null;
      var _index = 0; //图片的索引
      function _next() {
        //封装向右运动
        _index++;
        banner.style.transform = `translateX(${
          -_index * lis[0].offsetWidth
        }px)`;
        banner.style.transition = ".2s";
        if (_index >= lis.length - 1) {
          //判断临界值
          _index = 0;
          setTimeout(() => {
            banner.style.transform = `translate(0,0)`;
            banner.style.transition = "none";
          }, 500);
        }
        for (var i = 0; i < pages.length; i++) {
          pages[i].classList.remove("active");
        }
        pages[_index].classList.add("active");
      }
      //给右点击按钮绑定事件
      btn_next.onclick = function () {
        clearInterval(time);
        _next();
        time = setInterval(_next, 3000);
      };
      function _prev() {
        //封装向左运动
        _index--;
        if (_index <= -1) {
          banner.style.transform = `translateX(${
            -(lis.length - 1) * lis[0].offsetWidth
          }px)`;
          banner.style.transition = "none";
          _index = lis.length - 2;
          setTimeout(() => {
            banner.style.transform = `translateX(${
              -_index * lis[0].offsetWidth
            }px)`;
            banner.style.transition = ".3s";
          }, 0);
        } else {
          banner.style.transform = `translateX(${
            -_index * lis[0].offsetWidth
          }px)`;
          banner.style.transition = ".3s";
        }
        for (var i = 0; i < pages.length; i++) {
          pages[i].classList.remove("active");
        }
        pages[_index].classList.add("active");
      }
      //给做点击按钮绑定事件
      btn_prve.onclick = function () {
        clearInterval(time);
        _prev();
        time = setInterval(_next, 3000);
      };
      //给每一个分页器绑定事件
      for (var i = 0; i < pages.length; i++) {
        pages[i].index = i;
        pages[i].onclick = function () {
          clearInterval(time);
          _index = this.index;
          for (var j = 0; j < pages.length; j++) {
            pages[j].classList.remove("active");
          }
          pages[_index].classList.add("active");
          banner.style.transform = `translateX(${
            -_index * lis[0].offsetWidth
          }px)`;
          banner.style.transition = ".3s";
          //恢复自动走
          time = setInterval(_next, 3000);
        };
      }
      //调用自动执行
      time = setInterval(_next, 3000);
    </script>
  </body>
</html>
